<template>
  <el-dialog title="会员回访信息详情" :close-on-click-modal="false" :visible.sync="visible" fullscreen center>
    <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>详细信息</span>
      </div>
      <div class="text item">
        <el-form label-width="110px" inline size="mini">
          <el-row>
            <el-col :span="6">
              <el-form-item label="配镜单号" prop="saleBillId">
                <el-input v-model="detailData.saleBillId" placeholder="配镜单号" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="所属门店" prop="customerId">
                <el-input v-model="detailData.customerId" placeholder="所属门店" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="特殊加工要求" prop="customerId">
                <el-input v-model="detailData.customerId" placeholder="特殊加工要求" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="会员姓名" prop="name">
                <el-input v-model="detailData.name" placeholder="会员姓名" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="联系电话" prop="phone1">
                <el-input v-model="detailData.phone1" placeholder="联系电话" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="配镜时间" prop="customerId">
                <el-input v-model="detailData.customerId" placeholder="配镜时间" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="取镜时间" prop="customerId">
                <el-input v-model="detailData.customerId" placeholder="取镜时间" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="原价金额" prop="customerId">
                <el-input v-model="detailData.customerId" placeholder="原价金额" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="折扣金额" prop="customerId">
                <el-input v-model="detailData.customerId" placeholder="折扣金额" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="应收金额" prop="customerId">
                <el-input v-model="detailData.customerId" placeholder="应收金额" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="实缴金额" prop="customerId">
                <el-input v-model="detailData.customerId" placeholder="实缴金额" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table border>
          <el-table-column label="镜片种类"></el-table-column>
          <el-table-column label="右眼(R)/左眼(L)"></el-table-column>
          <el-table-column label="球镜"></el-table-column>
          <el-table-column label="柱镜"></el-table-column>
          <el-table-column label="轴向"></el-table-column>
          <el-table-column label="add"></el-table-column>
          <el-table-column label="三棱镜"></el-table-column>
          <el-table-column label="基底"></el-table-column>
          <el-table-column label="棱镜"></el-table-column>
          <el-table-column label="远用瞳距"></el-table-column>
          <el-table-column label="近用瞳距"></el-table-column>
          <el-table-column label="远用VA"></el-table-column>
          <el-table-column label="近用VA"></el-table-column>
        </el-table>
        <el-table border style="margin-top: 10px;" :data="detailData.feedbackGoodsInfos">
          <el-table-column prop="goodsId" label="商品代码"></el-table-column>
          <el-table-column prop="goodsName" label="商品名称"></el-table-column>
          <el-table-column prop="price" label="单价"></el-table-column>
          <el-table-column prop="quantity" label="数量"></el-table-column>
          <el-table-column prop="originalPrice" label="原价合计"></el-table-column>
          <el-table-column prop="discountRate" label="折扣率"></el-table-column>
          <el-table-column prop="discountPrice" label="折扣金额"></el-table-column>
          <el-table-column prop="receivablePrice" label="应收金额"></el-table-column>
          <el-table-column prop="memo" label="商品描述"></el-table-column>
        </el-table>
      </div>
    </el-card>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>会员回访信息</span>
      </div>
      <div class="text item">
        <el-form :model="dataForm" ref="dataForm" :rules="dataRule" label-width="110px" inline>
          <el-row>
            <el-col :span="6">
              <el-form-item label="会员卡号" prop="customerCard">
                <el-input v-model="dataForm.customerCard" placeholder="会员卡号" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="会员名称" prop="customerId">
                <el-input v-model="dataForm.name" placeholder="会员名称" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="人群类型" prop="crowdType">
                <el-select v-model="dataForm.crowdType" placeholder="请选择">
                  <el-option v-for="item in crowdTypeOptions" :key="item.value" :label="item.name" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="回访满意度" prop="statisfaction">
                <el-select v-model="dataForm.statisfaction" placeholder="请选择">
                  <el-option v-for="item in statisfactionOptions" :key="item.value" :label="item.name" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="反馈内容" prop="feedbackContent">
                <el-select v-model="dataForm.feedbackContent" placeholder="请选择">
                  <el-option v-for="item in feedbackContentOptions" :key="item.value" :label="item.name" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="适配度" prop="matchingDegree">
                <el-select v-model="dataForm.matchingDegree" placeholder="请选择">
                  <el-option v-for="item in matchingDegreeOptions" :key="item.value" :label="item.name" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="产品认知度" prop="productAwareness">
                <el-select v-model="dataForm.productAwareness" placeholder="请选择">
                  <el-option v-for="item in productAwarenessOptions" :key="item.value" :label="item.name" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="再次选择" prop="selectAgain">
                <el-select v-model="dataForm.selectAgain" placeholder="请选择">
                  <el-option v-for="item in selectAgainOptions" :key="item.value" :label="item.name" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" class="miui">
              <el-form-item label="解决办法" prop="resolvent" size="medium" style="width: 100%;">
                <el-input v-model="dataForm.resolvent" type="textarea" style="width: 100%;"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dataFormSubmit" :loading="ischeck" v-prevent-re-click>保 存</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import {customerFeedbackGetAllInfo,customerFeedBackPutObj} from '@/api/eims/customer-feedback.js'
  export default {
    data () {
      return {
				ischeck: false,
        visible: false,
        detailData: {},
        dataForm: {
          type: '1',        // 回访方式 1-电话回访 0-非电话回访
          status: '1',      // 回访状态
          customerId: '',
          crowdType: '',           // 人群类型
          statisfaction: '',      // 满意度
          feedbackContent: '',    // 反馈内容
          matchingDegree: '',     // 适配度
          productAwareness: '',   // 认知度
          selectAgain: '',        // 再次选择
          resolvent: ''
        },
        crowdTypeOptions: [
          {value: '1', name: '学龄前儿童'},
          {value: '2', name: '小学生'},
          {value: '3', name: '初中生'},
          {value: '4', name: '高中生'},
          {value: '5', name: '大学生'},
          {value: '6', name: '青年人'},
          {value: '7', name: '中年人'},
          {value: '8', name: '老年人'}
        ],
        statisfactionOptions: [{value: '1', name: '非常满意'},{value: '2',name:'满意'},{value:'3',name:'不满意'}],
        feedbackContentOptions: [
          {value: '1',name:'度数不适'},
          {value: '2',name:'松紧不适'},
          {value: '3',name:'佩戴中'},
          {value: '4',name:'未戴未取'},
          {value: '5',name:'自身原因'},
          {value: '6',name:'眼镜本身'},
          {value: '7',name:'其他'},
        ],
        matchingDegreeOptions: [{value: '1',name:'良好'},{value:'2',name:'一般'}],
        productAwarenessOptions: [{value:'1',name:'了解'},{value:'0',name:'不了解'}],
        selectAgainOptions: [{value:'1',name:'会'},{value:'0',name:'不会'}],
        dataRule: {
          statisfaction: [{required: true,message:'请填写回访满意度'}]
        }
      }
    },
    methods:{
      init (id) {
        this.dataForm.id = id || 0
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.id) {
            customerFeedbackGetAllInfo(this.dataForm.id).then(response => {
              if(response.data.code == '0'){
                this.dataForm.customerCard = response.data.data.customerCard
                this.dataForm.name = response.data.data.name
                this.dataForm.saleBillId = response.data.data.saleBillId
                this.detailData = response.data.data
              }else{
                this.$message.error(response.data.msg)
              }
            })
          }
        })
      },
      // 增加、修改会员回访记录
      dataFormSubmit(){
        this.ischeck = true
        customerFeedBackPutObj(this.dataForm).then(response => {
          if(response.data.code == '0'){
            this.$message.success('回访成功')
            this.visible = false
            this.$emit('refreshDataList')
          }else{
            this.$message.error(response.data.msg)
          }
					this.ischeck = false
        }).catch(() => {
          this.ischeck = false
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .miui .el-form-item--medium .el-form-item__content, .miui .el-form-item--medium .el-form-item__label {
    width: calc(100% - 110px);
  }
</style>
